<template>
  <div>我是子组件</div>
  <div>ID: {{id}}</div>
  <div>MESSAGE: {{message}}</div>
</template>

<script>
import { defineComponent, toRefs } from 'vue'
export default defineComponent({
  name: 'Child',
  props: ['id', 'message'],
  setup(props, context) {
    // toRefs解决props因为是响应式的，不能用es6的结构赋值，所以需要通过toRefs结构
    const { id, message } = toRefs(props)
    return {
      ...toRefs(props)
    }
  }
})
</script>

<style lang="less" scoped>

</style>
